<template>
	<vxe-modal
		v-model="showModal"
		:id="modalId"
		:width="layerWidth"
		:height="layerHeight"
		:minWidth="minWidth || 320"
		:minHeight="minHeight || 320"
		:show-zoom="showZoom"
		:resize="resize"
		:remember="remember"
		:storage="storage"
		:transfer="transfer"
		:showFooter="showFooter"
		:destroy-on-close="destroyOnClose"
		:mask="mask"
		:className="`dx-layer ${className}`"
		:mask-closable="maskClosable"
		:loading="loading"
		:lock-view="lockView"
		:lock-scroll="lockScroll"
		:esc-closable="escClosable"
		:margin-size="marginSize"
		:fullscreen="fullscreen"
		:draggable="draggable"
		:zIndex="zIndex"
		ref="modalRef"
		@close="modalClose"
	>
		<template #title>
			<span>{{ title || '' }}</span>
		</template>
		<template #default>
			<slot></slot>
		</template>
		<template #footer>
			<view class="pt-5px">
				<el-button type="info" @click="cancel">取消</el-button>
				<el-button type="primary" @click="confirm">确定</el-button>
			</view>
		</template>
	</vxe-modal>
</template>
<script lang="ts" setup name="DxLayer">
import { ref, watch ,computed} from 'vue';
import { VxeModalPropTypes } from 'vxe-table';
const modalRef = ref();
const showModal = ref(false);
const layerWidth = ref('900');
const layerHeight = ref('680');
const modalId = computed(()=>{
	return 'dx-modal-id'+Date.now();
})
// props
const props = withDefaults(
	defineProps<{
		modelValue: boolean;
		title: string;
		className?: string;
		minWidth?: VxeModalPropTypes.MinWidth;
		minHeight?: VxeModalPropTypes.MinHeight;
		width?: VxeModalPropTypes.Width;
		height?: VxeModalPropTypes.Height;
		mask?: boolean;
		maskClosable?: boolean;
		showZoom?: boolean;
		resize?: boolean;
		remember?: boolean;
		storage?: boolean;
		transfer?: boolean;
		showFooter?: boolean;
		destroyOnClose?: boolean;
		loading?: boolean;
		isSync?: boolean;
		lockView?: boolean;
		lockScroll?: boolean;
		escClosable?: boolean;
		marginSize?: VxeModalPropTypes.MarginSize;
		fullscreen?: boolean;
		draggable?: boolean;
		zIndex?: VxeModalPropTypes.ZIndex;
	}>(),
	{
		width: 900,
		height: 680,
		className: '',
		resize: true,
		remember: false,
		storage: true,
		transfer: true,
		showFooter: true,
		destroyOnClose: false,
		mask: true,
		showZoom: true,
		lockView: true,
		lockScroll: true,
		marginSize: 0,
		draggable: true,
		zIndex: 1000,
	}
);
watch(
	() => props.modelValue,
	(newProps) => {
		if (newProps) {
			// 判断是否是移动端
			if (window.navigator.userAgent.includes('Mobile')) {
				layerWidth.value = '100%';
				layerHeight.value = '100%';
			} else if (Number(props.width) >= window.innerWidth) {
				layerWidth.value = '100%';
				layerHeight.value = props.height + '';
			} else if (Number(props.height) >= window.innerHeight) {
				layerWidth.value = props.width + '';
				layerHeight.value = '100%';
			} else {
				layerWidth.value = props.width + '';
				layerHeight.value = props.height + '';
			}
			showModal.value = newProps;
		}
	}
);
// 绑定关系
const $emit = defineEmits(['update:modelValue', 'cancel', 'confirm', 'close']);
// 事件
function cancel() {
	showModal.value = false;
	$emit('update:modelValue', false);
	$emit('cancel');
}
// 确认
function confirm() {
	if (!props.isSync) {
		showModal.value = false;
		$emit('update:modelValue', false);
	}
	$emit('confirm');
}
// 关闭
function modalClose() {
	$emit('update:modelValue', false);
	$emit('close');
}
defineExpose({
	close: function () {
		showModal.value = false;
		modalClose();
	},
});
</script>
